<template>

<div>
    <!-- 这里是轮播图 组件 -->
    


    <!-- api -->
    <!-- 谁调用轮播图组件 谁为我们传递 lunbotuList -->
    <!-- 此时 lunbotuList 应该是 父组件 向子组件传值设置 -->
    <mt-swipe :auto="4000" >
    <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
        <img :src="item.url" :class="{full:isfull}">
    </mt-swipe-item>
    </mt-swipe>

</div>
<!-- 分析 商品评论中的轮播图 图片失真了 -->
<!-- 1.商品详情页面的 轮播图 期望 高度是100% 但是宽度为自适应 -->
<!-- 解决方案 :其他是没有重读的 只是宽度有分歧 定义一个属性 让使用轮播图的调用者
使用 自适应 还是 宽100% -->

</template>

<script>
export default {
    data(){
        return {}
    },
    props:["lunbotuList","isfull"]
}
</script>

<style lang="scss" scoped>
      .mint-swipe{
        height: 200px;
        text-align: center;

    .mint-swipe-item
    &:nth-child(1){
        background-color: red;
    
    }
    .mint-swipe-item
    &:nth-child(2){
        background-color: orange;
    }
    .mint-swipe-item
    &:nth-child(3){
        background-color: blue;
    }
        
     img {
    //   width: auto;
      height: 100%;
    }
    }
    .full {
        width: 100%;
    }
</style>
